<template>
  <div class="plot-view">
    <div class="top">
      <img src="../assets/bcg-image/border.png" alt="" class="border">
      <img src="../assets/bcg-image/chart-item.png" alt="" class="item">
      <span>武汉各区出行人口统计</span>
      </div>
      <div class="chart">
        <v-chart :option="option1" class="chart-item"></v-chart>
      </div>
      <img src="../assets/bcg-image/border.png" alt="" class="bottom">
  </div>
    <div class="plot-view1">
    <div class="top">
      <img src="../assets/bcg-image/border.png" alt="" class="border">
      <img src="../assets/bcg-image/chart-item.png" alt="" class="item">
      <span>武汉各区公交线路统计</span>
      </div>
      <div class="chart">
        <v-chart :option="option2" class="chart-item"></v-chart>
      </div>
      <img src="../assets/bcg-image/border.png" alt="" class="bottom">
  </div>
   <div class="plot-view2">
    <div class="top">
      <img src="../assets/bcg-image/border.png" alt="" class="border">
      <img src="../assets/bcg-image/chart-item.png" alt="" class="item">
      <span>武汉三镇人口统计</span>
      </div>
      <div class="chart">
        <v-chart :option="option3" class="chart-item"></v-chart>
      </div>
      <img src="../assets/bcg-image/border.png" alt="" class="bottom">
  </div>
     <div class="plot-view3">
    <div class="top">
      <img src="../assets/bcg-image/border.png" alt="" class="border">
      <img src="../assets/bcg-image/chart-item.png" alt="" class="item">
      <span>武汉三甲医院</span>
      </div>
      <div class="chart">

         <div class="item">
          <span>医院30家</span>
          <img src="../assets/icons/医院.png" alt="">
         </div>
         <div class="item">
          <span>门诊部300个</span>
          <img src="../assets/icons/门诊.png" alt="">
         </div>
         <div class="item">
          <span>病床3000张</span>
          <img src="../assets/icons/病床.png" alt="">
         </div>
      </div>
      <img src="../assets/bcg-image/border.png" alt="" class="bottom">
  </div>
       <div class="plot-view4">
    <div class="top">
      <img src="../assets/bcg-image/border.png" alt="" class="border">
      <img src="../assets/bcg-image/chart-item.png" alt="" class="item">
      <span>武汉三甲医院</span>
      </div>
      <div class="chart">

         <div class="item">
          <span>高校130家</span>
          <img src="../assets/icons/学校.png" alt="">
         </div>
         <div class="item">
          <span>在校大学生100万</span>
          <img src="../assets/icons/学生.png" alt="">
         </div>

      </div>
      <img src="../assets/bcg-image/border.png" alt="" class="bottom">
  </div>
</template>

<script setup>
import { ref } from 'vue'

const option1 = ref({
xAxis: {
    type: 'category',
    data: ['洪山区','江夏区','汉阳区','武昌区','青山区'],
  },
  yAxis: {
    type: 'value'
  },
  grid:{
    left: '3%',
    right: '4%',
    bottom: '25%',
    top: '10%',
    containLabel: true
  },
  series: [
    {
      data: [
        {value: 41000,
          itemStyle: {
            color: '#00a900',

          },

        },
        {
          value: 35000,
          itemStyle: {
            color: '#a90000'
          }
        },
        {value: 30000,
          itemStyle: {
            color: '#0000a9'
          }
        },
        {value: 42000,
          itemStyle: {
            color: '#a9a900'
          }
        },
        {value: 38000,
          itemStyle: {
            color: '#00a9a9'
          }
        },

      ],
      label: {
        show: true,
        position: 'top',
        fontSize: 12,
        color: '#fff',
        formatter: '{c}'
      },
      type: 'bar'
    }
  ]
})

const option2 = ref({

    legend: {
      orient: 'vertical',
      right: 10,
      top: 40,
      textStyle: {
        color: '#fff'
      }
  },

  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [0, 90],
      center: ['35%', '45%'],
      roseType: 'area',
       label: {
        position: 'inside',
        fontSize: 12,
        color: '#fff',
      },
      data: [
        { value: 50, name: '洪山区' },
        { value: 38, name: '汉阳区' },
        { value: 32, name: '武昌区' },
        { value: 50, name: '青山区' },
        { value: 28, name: '东西湖' },
      ]
    }
  ]
})
const option3 = ref({

  legend: {
    orient: 'horizontal',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      center: ['50%', '45%'],
      data: [
        { value: 1048, name: '武昌' },
        { value: 735, name: '其他' },
        { value: 580, name: '汉阳' },
        { value: 484, name: '汉口' },

      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
</script>

<style scoped>
.plot-view {
position: absolute;
z-index: 900;
top: 60px;
left: 80px;
}
.top {
  display: flex;
  color: white;
}
.top .border {
  transform: rotate(180deg);
  width: 100px;
}
.top .item {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 300px;
}
.top span {
  position: absolute;
  left: 70px;
  top: 12px;
  width: 300px;
  font-size: 14px;
}
.chart {
  position: absolute;
  top: 45px;
  left: 0;
  width: 300px;
  height: 200px;
  background-color: rgba(37, 117, 221, 0.5);
  border-radius: 10px;
}
.bottom{
  position: absolute;
  top: 220px;
  left: 195px;
}
.chart-item {
  width: 300px;
  height: 250px;
}

.plot-view1 {
position: absolute;
z-index: 900;
top: 310px;
left: 80px;
}
.top {
  display: flex;
  color: white;
}
.top .border {
  transform: rotate(180deg);
  width: 100px;
}
.top .item {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 300px;
}
.top span {
  position: absolute;
  left: 70px;
  top: 12px;
  width: 300px;
  font-size: 14px;
}
.chart {
  position: absolute;
  top: 45px;
  left: 0;
  width: 300px;
  height: 200px;
  background-color: rgba(37, 117, 221, 0.5);
  border-radius: 10px;
}
.bottom{
  position: absolute;
  top: 220px;
  left: 195px;
}
.chart-item {
  width: 300px;
  height: 250px;
}

.plot-view2 {
position: absolute;
z-index: 10;
top: 60px;
right: 260px;
}
.top {
  display: flex;
  color: white;
}
.top .border {
  transform: rotate(180deg);
  width: 100px;
}
.top .item {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 300px;
}
 .plot-view2 .top span {
  position: absolute;
  left: 95px;
  top: 12px;
  width: 300px;
  font-size: 14px;
}
.chart {
  position: absolute;
  top: 45px;
  left: 0;
  width: 300px;
  height: 200px;
  background-color: rgba(37, 117, 221, 0.5);
  border-radius: 10px;
}
.bottom{
  position: absolute;
  top: 220px;
  left: 195px;
}
.chart-item {
  width: 300px;
  height: 250px;
}

.plot-view3 {
position: absolute;
z-index: 900;
top:310px;
right: 260px;
}
.top {
  display: flex;
  color: white;
}
.top .border {
  transform: rotate(180deg);
  width: 100px;
}
.top .item {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 300px;
}
.plot-view3 .top span {
  position: absolute;
  left: 120px;
  top: 12px;
  width: 300px;
  font-size: 14px;
}
 .plot-view3 .chart {
  position: absolute;
  top: 45px;
  left: 0;
  width: 300px;
  height: 100px;
  background-color: rgba(37, 117, 221, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  font-size: 12px;
}
  .plot-view3 .chart .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .plot-view3 .chart .item img {
    width: 40px;
  }
 .plot-view3 .bottom{
  position: absolute;
  top: 120px;
  left: 195px;
}
.chart-item {
  width: 300px;
  height: 250px;
}

.plot-view4 {
position: absolute;
z-index: 900;
top:460px;
right: 260px;
}
.top {
  display: flex;
  color: white;
}
.top .border {
  transform: rotate(180deg);
  width: 100px;
}
.top .item {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 300px;
}
.plot-view4 .top span {
  position: absolute;
  left: 120px;
  top: 12px;
  width: 300px;
  font-size: 14px;
}
 .plot-view4 .chart {
  position: absolute;
  top: 45px;
  left: 0;
  width: 300px;
  height: 100px;
  background-color: rgba(37, 117, 221, 0.5);
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  font-size: 12px;
}
  .plot-view4 .chart .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .plot-view4 .chart .item img {
    width: 40px;
  }
 .plot-view4 .bottom{
  position: absolute;
  top: 120px;
  left: 195px;
}
.chart-item {
  width: 300px;
  height: 250px;
}
</style>
